{% extends "base1.html" %}

{% block content %}
<div class="container-fluid h-100" style="padding-top: 30px;">
    <div class="row h-100">
        <!-- Left sidebar with camera list -->
        <div class="col-md-2 sidebar">
            <h4 class="mb-3">摄像头列表</h4>
            <div class="camera-list">
                {% for camera in cameras %}
                <button type="button" 
                        class="btn btn-outline-primary camera-btn w-100" 
                        data-camid="{{ loop.index }}"
                        data-name="{{ camera.name }}">
                    <i class="fas fa-video me-2"></i>
                    {{ camera.name }}
                </button>
                {% endfor %}

                <p class="text-muted mt-3" style="font-size: 0.9em;">&nbsp;&nbsp;*仅供测试使用</p>
            </div>
        </div>

        <!-- Right content area with video display -->
        <div class="col-md-10 main-content">
            <!--
                <div class="video-container d-flex align-items-center justify-content-center">
                <img id="mjpegFeed" src="" alt="视频流" style="max-width:100%; max-height:100%; background:#000; border-radius:8px; border:1px solid #dee2e6;">
                </div>
            -->


            <div class="video-container d-flex align-items-center justify-content-center">
            <img id="mjpegFeed" 
            src="/static/res/placeholder.png" 
            alt="视频流" 
            style="max-width:100%; max-height:100%; background:#000; border-radius:8px; border:1px solid #dee2e6;">
            </div>

            <!-- Camera info bar -->
            <div class="camera-info-bar">
                <span id="currentCameraName">未选择摄像头</span>
                <div class="camera-controls">
                    <button class="btn btn-outline-light btn-sm" id="refreshBtn">
                        <i class="fas fa-sync-alt"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 用 cam_id=0 生成前缀，JS里替换
const videoFeedPrefix = "{{ url_for('main.video_feed', cam_id=0) }}".replace(/0$/, "");
document.addEventListener('DOMContentLoaded', function() {
    const cameraBtns = document.querySelectorAll('.camera-btn');
    const mjpegFeed = document.getElementById('mjpegFeed');
    const currentCameraName = document.getElementById('currentCameraName');
    const refreshBtn = document.getElementById('refreshBtn');
    let currentCamId = null;


    function setCamera(camId, name) {
        // 先清空src，确保浏览器会重新请求
        mjpegFeed.src = '';
        setTimeout(() => {
            mjpegFeed.src = videoFeedPrefix + camId + '?t=' + Date.now();
        }, 100);
        currentCameraName.textContent = name;
        currentCamId = camId;
    }

    // 默认选择第一个摄像头
    if (cameraBtns.length > 0) {
        cameraBtns[0].classList.add('active');
        setCamera(cameraBtns[0].dataset.camid, cameraBtns[0].dataset.name);
    }

    cameraBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            cameraBtns.forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            setCamera(this.dataset.camid, this.dataset.name);
        });
    });

    refreshBtn.addEventListener('click', function() {
        if (currentCamId) {
            mjpegFeed.src = '';
            setTimeout(() => {
                mjpegFeed.src = videoFeedPrefix + currentCamId;
            }, 100);
        }
    });
});

window.addEventListener('beforeunload', () => {
    navigator.sendBeacon('/release_all_cameras');
});
</script>
{% endblock %}